<script setup>

import {computed, defineProps,defineEmits} from "vue";
import {formsOutCssMapping} from "@/components/constants";
import CommonTagDisplay from "@/components/WordFormedTag/CommonTagDisplay.vue";
const theProps = defineProps(["label"]);
const emits = defineEmits(["closeTag"]);

const styleObject = computed(() =>{
  let formPart = theProps.label.substring(0,theProps.label.lastIndexOf('.'));
  let theForm = formsOutCssMapping[formPart];
  return {"--color-formOut-default":`var(--color-`+theForm+`)`,
    "--color-formOut-default-bg-color":`var(--color-`+theForm+`-bg-color)`}
})

function closeTag(){
    emits("closeTag",theProps.label);
}
</script>

<template>
  <el-tag closable class="fc-tempPick-tag" :style="styleObject" @close="closeTag">
      <CommonTagDisplay :label="label" />
  </el-tag>
</template>

<style scoped>
.el-tag.fc-tempPick-tag{
  font-weight: 600;
  --el-font-size-base: 12px;
  line-height: 8px;
  height: var(--common-tag-height);
  padding:7px 7px;
  margin: 3px;
  border-width: 1.5px;
  --el-tag-border-radius: 3px;
  --el-tag-bg-color: var(--color-formOut-default-bg-color);
  --el-tag-border-color: var(--color-formOut-default);
  --el-tag-hover-color: var(--color-formOut-default);
  --el-tag-text-color:var(--color-formOut-default);
  color: var(--color-formOut-default);
  border-style: dashed;
  border-color: var(--color-formOut-default);
  //background-color: var(--color-nounsOut-bg-color-editing);
  background-color: var(--color-formOut-default-bg-color);
}
</style>